Refactoring with Hooks
from Test-Driven React, Second Edition
『React Hooks を使った リファクタリング』
React の強みは、Web アプリケーションを Component と呼ばれる個々のユニットで表現できる点
ただし、どのロジックをどの Component に割り当てるべきかのルールは明確でない
が、各コンポーネントが 1 つの仕事だけを行うように設計するのが良いとされる
小さな単位に保つのが大切
単一責任の原則
この「1 つの仕事」かどうかは人間の直感に依存するので、自動的に判別できない
しかし、この考え方を持つことでコードの管理がしやすくなる
Component は、責任が増えて複雑になればなるほど管理が大変になる
複雑な Component をどう分割するか
1st edition では HOC Pattern を用いた
しかし、代替手段として React Hooks が出てきたので 2nd edition ではこちらを用いる
具体例
カスタムフックを用いたリファクタリング
カスタムフックを使った機能拡張
useCallback と useRef を使用して不要な更新を防ぐ
React DevTools を用いて、以下の手順でデバッグすると良い
1. 予期しない出力をレンダリングしているコンポーネントから調べる
2. 問題は Props の値にあるので、その Props を渡している上位コンポーネントに移動し、問題を引き起こしている部分を探す
3. そのコンポーネントに対して 単体テスト を書きながら問題を特定し、修正する